'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _icons = require('@ant-design/icons');

var _icons2 = _interopRequireDefault(_icons);

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _rcTweenOne = require('rc-tween-one');

var _rcTweenOne2 = _interopRequireDefault(_rcTweenOne);

var _AutoComplete = require('./common/AutoComplete');

var _AutoComplete2 = _interopRequireDefault(_AutoComplete);

var _SelectInput = require('./common/SelectInput');

var _SelectInput2 = _interopRequireDefault(_SelectInput);

var _utils = require('../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Panel = _collapse2['default'].Panel;

var TweenOneGroup = _rcTweenOne2['default'].TweenOneGroup;

var nameSource = ['all', 'transform', 'background', 'border', 'color', 'opacity', 'width', 'height', 'margin', 'padding', 'top', 'right', 'bottom', 'left', 'box-shadow', 'text-shadow'];

var easeSource = {
    ease: '缓动',
    'ease-in': '前',
    'ease-out': '后',
    'ease-in-out': '前后',
    'cubic-bezier(0.08, 0.82, 0.17, 1)': 'circ 后',
    'cubic-bezier(0.6, 0.04, 0.98, 0.34)': 'circ 前',
    'cubic-bezier(0.78, 0.14, 0.15, 0.86)': 'circ 前后'
};

var EditorTransition = function (_Component) {
    (0, _inherits3['default'])(EditorTransition, _Component);
    (0, _createClass3['default'])(EditorTransition, null, [{
        key: 'getDerivedStateFromProps',
        value: function getDerivedStateFromProps(props, _ref) {
            var prevProps = _ref.prevProps,
                getStateData = _ref.getStateData,
                prevData = _ref.data;

            var nextState = {
                prevProps: props
            };
            if (prevProps && prevProps.value !== props.value) {
                nextState.data = getStateData(props, prevData);
            }
            return nextState;
        }
    }]);

    function EditorTransition(props) {
        (0, _classCallCheck3['default'])(this, EditorTransition);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (EditorTransition.__proto__ || Object.getPrototypeOf(EditorTransition)).call(this, props));

        _initialiseProps.call(_this);

        _this.state = {
            data: _this.getStateData(props),
            getStateData: _this.getStateData // eslint-disable-line
        };
        return _this;
    }

    (0, _createClass3['default'])(EditorTransition, [{
        key: 'render',
        value: function render() {
            var _props = this.props,
                locale = _props.locale,
                value = _props.value,
                props = (0, _objectWithoutProperties3['default'])(_props, ['locale', 'value']);

            return _react2['default'].createElement(
                Panel,
                (0, _extends3['default'])({}, props, { header: props.header || locale.header }),
                _react2['default'].createElement(
                    _row2['default'],
                    { gutter: 8 },
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 6 },
                        locale.name
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 5 },
                        locale.time
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 6 },
                        locale.ease
                    ),
                    _react2['default'].createElement(
                        _col2['default'],
                        { span: 5 },
                        locale.delay
                    )
                ),
                _react2['default'].createElement(
                    TweenOneGroup,
                    {
                        appear: false,
                        enter: {
                            height: 0,
                            marginBottom: 0,
                            opacity: 0,
                            type: 'from',
                            duration: 300,
                            ease: 'easeOutCirc'
                        },
                        leave: { height: 0, marginBottom: 0, opacity: 0, duration: 300, ease: 'easeOutCirc' },
                        className: 'editor-transition-tween'
                    },
                    this.getChildren()
                ),
                _react2['default'].createElement(
                    'a',
                    { onClick: this.onClick, className: 'add-button' },
                    _react2['default'].createElement(_icons2['default'], { type: 'plus' })
                )
            );
        }
    }]);
    return EditorTransition;
}(_react.Component);

EditorTransition.propTypes = {
    value: _propTypes2['default'].string,
    onChange: _propTypes2['default'].func,
    header: _propTypes2['default'].string,
    locale: _propTypes2['default'].object
};
EditorTransition.defaultProps = {
    value: '',
    onChange: function onChange() {}
};

var _initialiseProps = function _initialiseProps() {
    var _this2 = this;

    this.onClick = function () {
        var data = _this2.state.data;
        data.push({ key: (0, _utils.getRandomKey)() });
        _this2.setState({
            data: data
        });
    };

    this.onChange = function (key, i, value) {
        var data = _this2.state.data;
        var currentData = data[i];
        currentData[key] = value;
        _this2.setData(data);
    };

    this.setData = function (data) {
        _this2.setState({
            data: data
        }, function () {
            var value = data.length ? '' : 'none';
            data.forEach(function (d) {
                if (d.name) {
                    value += '' + (value ? ', ' : '') + (0, _utils.removeMultiEmpty)(d.name + ' ' + (d.duration || '0s') + ' ' + (d.ease || 'ease') + (d.delay ? ' ' + d.delay : ''));
                }
            });
            if (value) {
                value += ';';
            }
            _this2.props.onChange('transition', value);
        });
    };

    this.getStateData = function (props) {
        var prevData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];

        var values = props.value.split(/,\s?(?=[a-z])/g).map(function (c) {
            return c.trim();
        });
        var data = values.filter(function (str) {
            return str && str !== 'all 0s ease 0s' && str !== 'all 0s ease';
        }).map(function (str, i) {
            if (str.replace(/;/g, '') === 'none') {
                return null;
            }
            var d = str.replace(/;/g, '').replace(/,\s+/g, ',').split(/\s+/g);
            var prev = prevData[i];
            return { key: prev ? prev.key : (0, _utils.getRandomKey)(), name: d[0], duration: d[1], ease: d[2], delay: d[3] };
        }).filter(function (c) {
            return c;
        });
        data = data.length ? data : [{ key: (0, _utils.getRandomKey)() }];
        return data;
    };

    this.getChildren = function () {
        return _this2.state.data.map(function (data, i) {
            return _react2['default'].createElement(
                _row2['default'],
                { gutter: 8, key: data.key },
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 6 },
                    _react2['default'].createElement(
                        _SelectInput2['default'],
                        {
                            style: { width: '100%' },
                            value: data.name || '',
                            size: 'small',
                            onChange: function onChange(e) {
                                _this2.onChange('name', i, e);
                            }
                        },
                        (0, _utils.getOptionArray)(nameSource)
                    )
                ),
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 5 },
                    _react2['default'].createElement(_AutoComplete2['default'], {
                        dataSource: ['s', 'ms'],
                        style: { width: '100%' },
                        value: data.duration || '',
                        onChange: function onChange(e) {
                            _this2.onChange('duration', i, e);
                        }
                    })
                ),
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 6 },
                    _react2['default'].createElement(
                        _SelectInput2['default'],
                        {
                            style: { width: '100%' },
                            value: data.ease || '',
                            dropdownStyle: { width: 104 },
                            onChange: function onChange(e) {
                                _this2.onChange('ease', i, e);
                            }
                        },
                        (0, _utils.getOption)(easeSource)
                    )
                ),
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 5 },
                    _react2['default'].createElement(_AutoComplete2['default'], {
                        dataSource: ['s', 'ms'],
                        style: { width: '100%' },
                        value: data.delay || '',
                        placement: 'bottomRight',
                        onChange: function onChange(e) {
                            _this2.onChange('delay', i, e);
                        }
                    })
                ),
                _react2['default'].createElement(
                    _col2['default'],
                    { span: 2 },
                    _react2['default'].createElement(
                        'div',
                        {
                            onClick: function onClick() {
                                _this2.removeClick(i);
                            },
                            className: 'icon-button'
                        },
                        _react2['default'].createElement(_icons2['default'], { type: 'close-circle' })
                    )
                )
            );
        });
    };

    this.removeClick = function (i) {
        var data = _this2.state.data;
        data.splice(i, 1);
        _this2.setData(data);
    };
};

EditorTransition.componentName = 'EditorTransition';

exports['default'] = (0, _reactLifecyclesCompat.polyfill)(EditorTransition);
module.exports = exports['default'];